/* Ghost Blog Styles */

/* === Tailwind Typography (prose) === */

/* Provides default styling for the Tailwind Typography plugin via element modifiers. */
/* https://tailwindcss.com/docs/typography-plugin */

.prose {
	@apply text-base font-token text-token;
	/* Element Modifiers */
	/* https://tailwindcss.com/docs/typography-plugin#element-modifiers */
	@apply prose-headings:text-token;
	/* @apply prose-lead:{utility}; */
	@apply prose-h1:font-heading-token prose-h1:text-3xl prose-h1:md:text-5xl;
	@apply prose-h2:font-heading-token prose-h2:text-2xl prose-h2:md:text-4xl;
	@apply prose-h3:font-heading-token prose-h3:text-xl prose-h3:md:text-2xl;
	@apply prose-h4:font-heading-token prose-h4:text-lg prose-h4:md:text-xl;
	@apply prose-p:text-base;
	/* @apply prose-a:{utility}; */
	@apply prose-a:text-primary-700 prose-a:dark:text-primary-500 prose-a:hover:brightness-110 prose-a:underline;
	@apply prose-blockquote:text-token prose-blockquote:text-base prose-blockquote:!border-secondary-500;
	/* @apply prose-figure:{utility}; */
	@apply prose-figcaption:text-token prose-figcaption:!text-sm prose-figcaption:italic prose-figcaption:text-center mt-3;
	@apply prose-strong:text-token;
	@apply prose-em:text-token;
	/* @apply prose-ol:{utility}; */
	/* @apply prose-ul:{utility}; */
	@apply prose-li:text-base;
	/* @apply prose-table:{utility}; */
	/* @apply prose-thead:{utility}; */
	/* @apply prose-tr:{utility}; */
	/* @apply prose-th:{utility}; */
	/* @apply prose-td:{utility}; */
	/* @apply prose-img:{utility}; */
	/* @apply prose-video:{utility}; */
	/* @apply prose-hr:{utility}; */

	/* The following have special use cases and must be handled seperately */
	/* @apply prose-code:{utility}; */
	/* @apply prose-pre:{utility}; */
}

/* NOTE: keep these in sync with typography.css */
.prose pre:not(.code-block pre) {
	@apply font-mono text-base bg-neutral-900/90 text-white p-4 whitespace-pre-wrap overflow-x-auto rounded-container-token;
}
.prose code:is(:not(pre *)) {
	@apply font-mono text-xs text-primary-700 dark:text-primary-400 whitespace-nowrap;
	@apply bg-primary-500/30 dark:bg-primary-500/20;
	@apply py-0.5 px-1 rounded;
}

/* === Embeds === */

/* YouTube */
.kg-embed-card iframe {
	@apply w-full h-full aspect-video shadow-xl;
	border-radius: var(--theme-rounded-container);
}

/* Gif */
.kg-image-card {
	@apply text-center;
}
.kg-image-card img {
	@apply mx-auto max-w-full shadow-xl;
	border-radius: var(--theme-rounded-container);
}

/* Callout */
.kg-callout-card {
	@apply bg-surface-500/30 border border-surface-500 grid grid-cols-[auto_1fr] gap-4 p-4 rounded-xl;
}
.kg-callout-card-grey {
	@apply bg-neutral-500/30 border-neutral-500;
}
.kg-callout-card-white {
	@apply bg-white/30 border-white;
}
.kg-callout-card-blue {
	@apply bg-blue-500/30 border-blue-500;
}
.kg-callout-card-green {
	@apply bg-green-500/30 border-green-500;
}
.kg-callout-card-yellow {
	@apply bg-yellow-500/30 border-yellow-500;
}
.kg-callout-card-red {
	@apply bg-red-500/30 border-red-500;
}
.kg-callout-card-pink {
	@apply bg-pink-500/30 border-pink-500;
}
.kg-callout-card-purple {
	@apply bg-purple-500/30 border-purple-500;
}
.kg-callout-card-secondary {
	@apply bg-secondary-500/30 border-secondary-500;
}

/* File */
.kg-file-card-container {
	@apply bg-secondary-500/5 border border-surface-100 dark:border-surface-800 grid grid-cols-[1fr_auto] gap-4 p-4 shadow !no-underline hover:brightness-110;
	border-radius: var(--theme-rounded-container);
}
.kg-file-card-contents {
	@apply text-black dark:text-white;
}
.kg-file-card-title {
	@apply hidden;
}
.kg-file-card-metadata {
	@apply space-y-1;
}
.kg-file-card-filename {
	@apply font-bold;
}
.kg-file-card-filesize {
	@apply text-sm opacity-75;
}
.kg-file-card-icon {
	@apply bg-secondary-500 p-3 flex justify-center items-center;
	border-radius: var(--theme-rounded-base);
}
.kg-file-card-icon svg {
	@apply !text-white w-8 aspect-square;
}

/* Codepen */
.kg-embed-card iframe {
	@apply shadow-xl;
}

/* Button */
.kg-align-center {
	@apply text-center;
}
.kg-button-card a,
.kg-header-card a {
	@apply !no-underline;
	@apply bg-secondary-500 !text-surface-50 font-bold;
	@apply text-base px-5 py-[9px];
	@apply text-center whitespace-nowrap;
	@apply inline-flex justify-center items-center space-x-2;
	@apply hover:brightness-110;
	@apply transition-all active:scale-90;
	border-radius: var(--theme-rounded-base);
}

/* Twitter */
.kg-embed-card:has(.twitter-tweet) {
	@apply flex justify-center p-4 overflow-x-auto;
}

/* Bookmark */
.kg-bookmark-card {
	@apply bg-secondary-500/5 border border-surface-100 dark:border-surface-800 shadow hover:brightness-110 overflow-hidden;
	border-radius: var(--theme-rounded-container);
}
.kg-bookmark-container {
	@apply !text-token !no-underline;
	@apply grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4;
}
.kg-bookmark-content {
	@apply flex flex-col justify-between space-y-0  p-4;
}
.kg-bookmark-title {
	@apply font-bold;
}
.kg-bookmark-description {
	@apply text-sm opacity-50;
}
.kg-bookmark-metadata {
	@apply flex items-center space-x-3;
}
.kg-bookmark-icon {
	@apply w-6 h-6;
}
.kg-bookmark-author {
	@apply text-sm;
}
.kg-bookmark-publisher {
	@apply text-xs opacity-50;
}
.kg-bookmark-thumbnail {
	@apply bg-surface-50-900-token h-56 md:h-full w-full md:w-48 text-center;
}
.kg-bookmark-thumbnail img {
	@apply w-full h-full md:max-h-40 object-cover overflow-hidden;
}

/* Headers */
.kg-header-card {
	@apply bg-secondary-500/5 border border-surface-100 dark:border-surface-800;
	@apply px-4 text-center space-y-2;
	border-radius: var(--theme-rounded-container);
}
.kg-size-small {
	@apply py-4;
}
.kg-size-medium {
	@apply py-12;
}
.kg-size-large {
	@apply py-20;
}
.kg-header-card h2 {
	@apply text-4xl;
}
.kg-header-card h3 {
	@apply text-base;
}
.kg-header-card a {
	@apply inline-block;
}
